<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="success" @click="handleSubmit"> 保存设置 </el-button>
      <el-button class="filter-item" type="success" @click="toAuto"> 智能设置 </el-button>
    </div>
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-form :model="device">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="device.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="位置" :label-width="formLabelWidth">
              <el-input v-model="device.position" autocomplete="off" />
            </el-form-item>
            <el-form-item label="SN" :label-width="formLabelWidth">
              <el-input v-model="device.sn" autocomplete="off" />
            </el-form-item>
            <el-form-item label="订阅" :label-width="formLabelWidth">
              <el-input v-model="device.sub" autocomplete="off" />
            </el-form-item>
            <el-form-item label="推送" :label-width="formLabelWidth">
              <el-input v-model="device.pub" autocomplete="off" />
            </el-form-item>
            <el-form-item label="型号" :label-width="formLabelWidth">
              <el-input v-model="device.model" autocomplete="off" />
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth">
              <el-input v-model="device.tag" autocomplete="off" disabled />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>外设管理</span>
            <el-button class="filter-item" type="primary" style="float:right;" @click="handleAddPin"> 新增外设 </el-button>
          </div>
          <el-table border :data="pin" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" :label-width="formLabelWidth">
                  <el-form-item label="名称">
                    <el-input v-model="props.row.name" autocomplete="off" placeholder="请输入名称" style="width:300px;" />
                  </el-form-item>
                  <el-form-item label="位置">
                    <el-input v-model="props.row.position" autocomplete="off" placeholder="请输入位置" style="width:300px;" />
                  </el-form-item>
                  <el-form-item label="类别">
                    <el-radio-group v-model="props.row.tag">
                      <el-radio label="infrared">红外</el-radio>
                      <el-radio label="door">门禁</el-radio>
                      <el-radio label="source">源控</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="引脚编号">
                    <el-input-number v-model="props.row.number" autocomplete="off" style="width:300px;" />
                  </el-form-item>
                  <el-form-item label="引脚模式">
                    <el-radio-group v-model="props.row.mode">
                      <el-radio :label="1">输入</el-radio>
                      <el-radio :label="2">输出</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="引脚状态">
                    <el-radio-group v-model="props.row.status">
                      <el-radio :label="0">低电平</el-radio>
                      <el-radio :label="1">高电平</el-radio>
                    </el-radio-group>
                    <!-- <el-input-number v-model="props.row.status" autocomplete="off" style="width:300px;" /> -->
                  </el-form-item>
                  <el-form-item label="引脚状态名称">
                    <el-input v-model="props.row.status_txt" autocomplete="off" style="width:300px;" />
                  </el-form-item>
                  <el-form-item label="引脚状态类别" :label-width="formLabelWidth">
                    <el-button class="button-new-tag" size="small" @click="handleAddPos(props.$index)">+ 添加状态</el-button>
                    <el-table :data="props.row.values" style="width: 100%" border>
                      <el-table-column prop="name" label="名称" />
                      <el-table-column prop="value" label="值" />
                      <el-table-column label="操作">
                        <template slot-scope="position_props">
                          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelPos(props.$index,position_props.$index)"> 删除 </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                  <el-form-item>
                  <!-- <el-button class="filter-item" type="primary" @click="defaultConfig(props.row)"> 默认配置 </el-button> -->
                  <!-- <el-button class="filter-item" type="success" @click="startTask(props.$index, props.row, 'get')"> 读取配置 </el-button> -->
                  <!-- <el-button class="filter-item" type="warning" @click="startTask(props.$index, props.row, 'set')"> 更新配置 </el-button> -->
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="ID" type="index" align="center" />
            <el-table-column label="名称" align="center" prop="name" />
            <el-table-column label="操作" align="center">
              <template slot-scope="{$index}">
                <el-button size="mini" type="success" icon="el-icon-top" @click="handleUpPin($index)" />
                <el-button size="mini" type="success" icon="el-icon-bottom" @click="handleDownPin($index)" />
                <el-button type="danger" @click="handleDeletePin($index)"> 删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

    </el-row>

    <el-dialog title="添加状态" :visible.sync="dialogAddPosFormVisible">
      <el-form :model="addPosform">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="addPosform.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="值" :label-width="formLabelWidth">
          <!-- <el-input-number v-model="addPosform.value" autocomplete="off" /> -->
          <el-radio-group v-model="addPosform.value">
            <el-radio :label="0">低电平</el-radio>
            <el-radio :label="1">高电平</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddPosFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddPosConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editDevice } from '@/api/device'
import { CMD_AXIS } from '@/utils/cmd'

const defaultDeviceConfig = {
  name: '控制设备',
  sn: 'ctl0001',
  model: 'FSC_CTL',
  tag: 'control',
  position: '位置',
  sub: 'fsc/control/ctl0001/rx',
  pub: 'fsc/control/ctl0001/tx',
  value: { pin: null },
  online: 0,
  status: 0,
  lock: 0,
  order: 4
}

const tagsDefalut = [{
  value: 'infrared',
  label: '红外'
}, {
  value: 'door',
  label: '门禁'
}, {
  value: 'switch',
  label: '源控'
}]

export default {
  name: 'RG601',
  components: { },
  data() {
    return {
      formLabelWidth: '200px',
      device: defaultDeviceConfig,
      tags: tagsDefalut,
      pin: [],
      // 添加位置相关变量
      dialogAddPosFormVisible: false,
      addPosIndex: 0,
      addPosform: {
        name: '',
        value: 0
      }
    }
  },
  created() {
    this.device = this.$route.query
    this.pin = this.device.value.pin
    console.log('设备信息')
    console.log(this.device)
    if (this.pin === undefined) {
      this.pin = []
    }
    this.subscribe(this.device.pub)
  },
  methods: {
    toAuto() {
      this.device.value.pin = this.pin
      this.$router.push({
        path: '/device/control/auto',
        query: this.device
      })
    },
    // 提交保存
    handleSubmit() {
      this.device.value.pin = this.pin
      editDevice(this.device).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.$router.push({ path: '/device/index' })
        } else this.$message(response.message)
      })
    },
    // 添加坐标
    handleAddPin() {
      this.pin.push({
        name: '外接设备1',
        position: '位置',
        tag: 'infrared',
        mode: 1,
        number: 0,
        status: 0,
        status_txt: '无',
        values: []
      })
    },
    handleDeletePin(index) {
      this.pin.splice(index, 1)
    },
    // 上移
    handleUpPin(index) {
      if (index === 0) {
        return
      }
      var tmp = this.pin[index]
      this.pin.splice(index, 1)
      this.pin.splice(index - 1, 0, tmp)
    },
    // 下移
    handleDownPin(index) {
      if (this.pin.length === index) {
        return
      }
      var tmp = this.pin[index]
      this.pin.splice(index, 1)
      this.pin.splice(index + 1, 0, tmp)
    },

    handleDelPos(pin_index, pos_index) {
      this.pin[pin_index].values.splice(pos_index, 1)
    },

    handleAddPos(index) {
      console.log(index)
      this.addPosIndex = index
      this.dialogAddPosFormVisible = true
    },

    handleAddPosConfirm() {
      console.log('添加位置确定')
      var tmp = JSON.parse(JSON.stringify(this.addPosform))
      console.log(tmp)
      this.pin[this.addPosIndex].values.push(tmp)
      console.log(this.pin)
      // this.pin[this.addPosIndex].values.push(this.addPosform)
      this.dialogAddPosFormVisible = false
    },

    // 默认配置
    defaultConfig(item) {
    },

    // 获取命令
    getCmd(pin_number, step, data) {
      var code = null
      this.publish(this.device.sub, JSON.stringify({
        code: code.toString(),
        msg: '1'
      }))
    },

    // 设置命令
    setCmd(pin_number, step, data) {
      var msg = null
      var code = null
      switch (step) {
        case 0:
          code = CMD_AXIS[pin_number].set_encoder
          msg = data.encoder
          break

        default:
          break
      }
      // code: '2' + pin_number * 2 + step,
      this.publish(this.device.sub, JSON.stringify({
        code: code.toString(),
        msg: msg.toString()
      }))
    },

    subscribe(val) {
      console.log('订阅')
      console.log('topic:' + val)
      this.$mqtt.subscribe(val)
    },
    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    },

    codeDeal(code, msg) {
      this.task.once_done = true
      for (var i = 0; i < CMD_AXIS.length; i++) {
        if (CMD_AXIS[i].get_encoder === code) {
          this.pin[i].encoder = msg
        }
      }
    }
  },
  mqtt: {
    '#'(data, topic) {
      console.log('mqtt recv!!!')
      console.log('topic:' + topic)
      console.log('payload: ' + String.fromCharCode.apply(null, data))
      if (topic === this.device.pub) {
        var payload = JSON.parse(data)
        console.log(payload)
        console.log('主题正确')
        this.codeDeal(parseInt(payload.aswcode), payload.aswmsg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card{
  margin-bottom: 20px;
}

.plus{
  min-width: 100%;
  min-height: 300px;
  text-align: center;
  font-size: 108px;
}

 .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }

</style>
